<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="年度">
                <el-date-picker v-model="form.year" type="year" value-format="yyyy" :editable="false" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="归属单位">
                <el-cascader
                    v-model="form.orgs"
                    :props="props"
                    :options="orgOptions"
                    clearable
                    :show-all-levels="false"
                    placeholder="请选择"
                    style="width: 100%"
                />
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c87_d421_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c87_d421_2' }" type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <div slot="button">
            <BaseButton v-permission="{ btnCode: 'dlyh_c87_d422_2' }" @click="handleAdd">新建年度预算</BaseButton>
        </div>

        <!--数据列表区-->
        <BaseTable ref="baseTable" slot="table" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="calc(100% - 73px)" highlight-current-row @sort-change="handleSortChange">
            <template #status="{ scope: { row } }">
                <span v-if="row.lockStatus === 1" style="color:#67C23A;">未锁定</span>
                <span v-if="row.lockStatus === 2" style="color:#F56C6C;">已锁定</span>
            </template>
            <template #handle="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: 'dlyh_c87_d423_2' }" type="text" @click="handleDetail(row.id)">
                    查看
                </BaseButton>
                <BaseButton v-show="row.lockStatus === 1" v-permission="{ btnCode: 'dlyh_c87_d424_2' }" type="text" @click="handleLock(row)">锁定</BaseButton>
                <BaseButton v-show="row.lockStatus === 2" v-permission="{ btnCode: 'dlyh_c87_d424_2' }" type="text" @click="handleUnlock(row)">取消锁定</BaseButton>
                <BaseButton v-show="row.lockStatus === 1" v-permission="{ btnCode: 'dlyh_c87_d425_2' }" type="text" @click="handleEdit(row.id)">编辑</BaseButton>
                <BaseButton v-show="row.lockStatus === 1" v-permission="{ btnCode: 'dlyh_c87_d426_2' }" type="text" color="danger" @click="handleDelete(row)">
                    删除
                </BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { BudgetingModel } from '@/models'
import reconfirm from '@/utils/reconfirm'
import KeepAliveHandler from '@/mixins/keepAliveHandler'

export default {
    name: 'BudgetingIndex',
    components: {
        BasePage
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                year: '',
                orgs: [],
                // sort: 1
            },
            conditionObjKey: 'form',
            tableRef: 'baseTable'
        })
    ],
    data() {
        return {
            model: new BudgetingModel(),
            form: {
                year: '',
                orgs: [],
                sort: 1
            },
            orgOptions: [],
            props: {
                value: 'key',
                label: 'value'
            },
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'year',
                        label: '年度',
                        sortable: 'custom',
                        'show-overflow-tooltip': true,
                        width: '110'
                    }
                },
                {
                    attrs: {
                        prop: 'subordinateUnitsName',
                        label: '归属单位',
                        'show-overflow-tooltip': true,
                        'min-width': '180'
                    }
                },
                {
                    attrs: {
                        prop: 'collectionManagementFeeTotal',
                        label: '征管经费（元）',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'maintFeeTotal',
                        label: '养护经费（元）',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'publicFee',
                        label: '公用经费（元）',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'personnelFee',
                        label: '人员经费（元）',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        prop: 'lockStatus',
                        label: '锁定状态',
                        width: '120',
                        'show-overflow-tooltip': true,
                    }
                },
                {
                    attrs: {
                        prop: 'updateUserName',
                        label: '更新人',
                        'show-overflow-tooltip': true,
                        width: '110',
                    }
                },
                {
                    attrs: {
                        prop: 'updateTime',
                        label: '更新时间',
                        sortable: 'custom',
                        'show-overflow-tooltip': true,
                        width: '170',
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        'min-width': '200',
                        fixed: 'right'
                    }
                }
            ])
        }
    },
    created() {
        this.getOrgAll()
        this.getList()
    },
    methods: {
        handleSortChange({ column, prop, order }) {  
            if (prop === 'year') {
                if (order === 'ascending') {  
                    this.form.sort = 3
                } else if (order === 'descending') {
                    this.form.sort = 2 
                } else {
                    this.form.sort = 1
                }
            }
            if (prop === 'updateTime') {
                if (order === 'ascending') {  
                    this.form.sort = 5
                } else if (order === 'descending') {
                    this.form.sort = 4 
                } else {
                    this.form.sort = 1 
                }
            }
            this.page.pageNo = 1
            this.getList()
        },
        // 获取所属单位
        getOrgAll() {
            this.model.managementTree().then((res) => {
                this.orgOptions = res || []
            })
        },
        getList() {
            this.listLoading = true
            const [subordinateUnitsType = null, subordinateUnits = null] = this.form.orgs
            this.model
                .getList({ ...this.form, subordinateUnitsType, subordinateUnits }, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleDelete(row) {
            reconfirm({
                title: '删除年度预算',
                text: `请确认是否删除“${row.year}年${row.subordinateUnitsName}”的年度预算！`,
                callback: () => this.delete(row.id)
            })
        },
        delete(id) {
            return this.model.delete({ id }).then(() => {
                this.getList()
                this.$message.success('删除成功!')
            })
        },
        handleLock(row) {
            reconfirm({
                title: '锁定年度预算',
                text: `请确认是否锁定“${row.year}年${row.subordinateUnitsName}”的年度预算？锁定后目标预算将无法编辑、删除。`,
                callback: () => this.lock(row.id)
            })
        },
        lock(id) {
            return this.model.lock({ id }).then(() => {
                this.getList()
                this.$message.success('锁定成功!')
            })
        },
        handleUnlock(row) {
            reconfirm({
                title: '取消锁定年度预算',
                text: `请确认是否取消锁定“${row.year}年${row.subordinateUnitsName}”的年度预算？取消锁定后目标预算将可编辑、删除。`,
                callback: () => this.unlock(row.id)
            })
        },
        unlock(id) {
            return this.model.unlock({ id }).then(() => {
                this.getList()
                this.$message.success('取消锁定成功!')
            })
        },
        handleDetail(id) {
            this.$router.push({
                path: 'detail',
                query: { id }
            })
        },
        handleAdd() {
            this.$router.push({
                path: 'add',
                query: { type: 'add' }
            })
        },
        handleEdit(id) {
            this.$router.push({
                path: 'edit',
                query: { type: 'edit', id }
            })
        }
    }
}
</script>

<style lang="scss">
</style>
